<div class="{{ prefixCls }} {{ prefixCls }}-align-center">
  <Flex *ngIf="mode === 'button'">
    <FlexItem class="{{ prefixCls }}-wrap-btn {{ prefixCls }}-wrap-btn-prev">
      <a Button [inline]="true" [disabled]="current <= 1 || disabled" (onClick)="onClick(current - 1)">
        <ng-container *ngIf="!isTemplateRef(locale.prevText)">
          {{ locale.prevText }}
        </ng-container>
        <ng-template *ngIf="isTemplateRef(locale.prevText)" [ngTemplateOutlet]="locale.prevText"></ng-template>
      </a>
    </FlexItem>
    <FlexItem class="{{ prefixCls }}-wrap" aria-live="assertive" *ngIf="!simple">
      <span class="active">{{ current }}</span
      >/
      <span>{{ total }}</span>
    </FlexItem>
    <FlexItem class="{{ prefixCls }}-wrap-btn {{ prefixCls }}-wrap-btn-next">
      <a Button [inline]="true" [disabled]="current >= total || disabled" (onClick)="onClick(current + 1)">
        <ng-container *ngIf="!isTemplateRef(locale.nextText)">
          {{ locale.nextText }}
        </ng-container>
        <ng-template *ngIf="isTemplateRef(locale.nextText)" [ngTemplateOutlet]="locale.nextText"></ng-template>
      </a>
    </FlexItem>
  </Flex>

  <div class="{{ prefixCls }}-wrap" *ngIf="mode === 'number'">
    <span class="active">{{ current }}</span
    >/<span>{{ total }}</span>
  </div>

  <div class="{{ prefixCls }}-wrap" *ngIf="mode === 'pointer'">
    <div
      *ngFor="let number of getNumber(total); let i = index"
      class="{{ prefixCls }}-wrap-dot {{ current === i + 1 ? prefixCls + '-wrap-dot-active' : '' }}"
    >
      <span></span>
    </div>
  </div>
</div>
